<!--suppress CssInvalidPropertyValue -->
<template>
    <view class="article-page global__theme0">
        <cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">{{article.title || '小强哥的博客'}}</block>
        </cu-custom>

        <view class="load-progress" :class="loadProgress!==0?'show':'hide'" :style="[{top:customBar + statusBar +'px'}]">
            <view class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
            <view class="load-progress-spinner text-green"></view>
        </view>

        <view class="article-content">

            <view class="source article-source">{{article.source}}</view>

            <view></view>

            <!-- <towxml :nodes="content"/> -->
			<jyf-parser :html="content" show-with-animation ref="article"></jyf-parser>

            <view class="reference">
                <view :class="['like', isActive ? 'active' : '']" @tap="postLikeArticle">
                    <view :class="['fave', isActive ? 'active' : '']"></view>
                    <view class="star">{{likes}}</view>
                </view>
            </view>

            <view class="copyright">
                <view class="wrapper">
                    <view>
                        <label>文本标题：</label>
                        <text>{{article.title}}</text>
                    </view>
                    <view>
                        <label>版权信息：</label>
                        <text>"署名-非商用-自由转载" 转载请注明出处。</text>
                    </view>
                </view>
            </view>

            <view class="extension">
                <image mode="widthFix" src="/static/avatar/extension.png"></image>
            </view>

        </view>
    </view>
</template>

<script>
    import marked from 'marked'
    import {dateFormat} from "../../utils";
	import jyfParser from "../../components/jyf-parser/jyf-parser";

    const db = wx.cloud.database()
    const _ = db.command

    export default {
        components: {
			jyfParser
        },
        data() {
            return {
                loadProgress: 0,
                isActive: false,
                content: '',
                likes: 1,
                article: {},
                statusBar: this.StatusBar,
                customBar: this.CustomBar,
            }
        },

        async onLoad(query) {
            this.LoadProgress()
            await this.handleLoadPage(query)
            await this.updateViews()
        },
        methods: {
            async postLikeArticle() {
                if(this.isActive) return
                const data = await db.collection('articles').where({
                    _id: this.article._id,
                }).update({
                    data: {
                        likes: _.inc(1)
                    },
                })
                if(data.stats.updated === 1) {
                    this.likes += 1
                    this.isActive = !this.isActive
                }
            },
            async handleLoadPage(query) {
                const {data} = await db.collection('articles').where({
                    _id: query.id,
                }).get()
                this.article = data[0];
                this.content = marked(data[0].content)
                this.likes =  data[0].likes
            },
            async updateViews() {
                await db.collection('articles').where({
                    _id: this.article._id,
                }).update({
                    data: {
                        views: _.inc(1)
                    },
                })
            },
            LoadProgress(e) {
                this.loadProgress = this.loadProgress + 3;
                if (this.loadProgress < 100) {
                    setTimeout(() => {
                        this.LoadProgress();
                    }, 50)
                } else {
                    this.loadProgress = 0;
                }
            },
        }
    }
</script>

<style lang="scss">

    .article-page {
        min-height: 100vh;
        background: url("#{$http}/VKCEYUGU-unidf07c07/05192530-d070-11ea-b244-a9f5e5565f30.png") repeat;
    }

    .article-content {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        .source {
            position: absolute;
            top: -14rpx;
            left: -52rpx;
            display: block;
            width: 160rpx;
            height: 84rpx;
            line-height: 100rpx;
            transform: rotate(-45deg);
            text-align: center;
            font-size: 24rpx;
        }

        .article-source {
            color: #FFF;
            background: var(--theme-color);
            transition: .2s ease-in background-color;
        }
    }

    .copyright {
        padding-bottom: 50rpx;

        .wrapper {
            padding: 20rpx 24rpx;
            font-size: 24rpx;
            margin: 0 20rpx;
            border-left: 3px solid var(--theme-color);
            border-radius: 3px;
            word-break: break-word;
            line-height: 1.8;
            background-color: var(--box-back-color);
            /*transition: border-left-color,background-color .4s ease-in;*/
            label {
                margin-right: .2em;
                color: #5d686f;
            }

            text {
                text-decoration: none;
                color: #4094c7;
            }
        }
    }

    .extension {
        margin: 20rpx 24rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }


    .reference {
        margin: 40rpx;
        .like {
            height: 4rem;
            width: 4rem;
            border-radius: 2rem;
            background-color: rgba(96, 125, 139, 0.2);
            margin: 0 auto;
            color: #fff;

            &.active {
                color: #fff;
            }

            .fave {
                width: 100rpx;
                height: 100rpx;
                margin: 0 auto;
                border-radius: 50%;
                background: url("#{$http}/VKCEYUGU-unidf07c07/0edeabd0-d070-11ea-8a36-ebb87efcf8c0.png") no-repeat left;
                background-size: auto 100%;

                &.active {
                    background-position: right;
                    transition: background .6s steps(19);
                }
            }

            .star {
                margin-top: -25rpx;
                text-align: center;
                color: #fff
            }

        }
    }
</style>
